<template>
  <section class="app-container">
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters" @submit.native.prevent>
        <el-form-item>
          <el-input v-model="filters.name" placeholder="赛事名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getProject">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="projectData" highlight-current-row @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="project.name" label="赛事名称" min-width="120">
      </el-table-column>
      <el-table-column prop="project.format" label="赛制" min-width="100" :formatter="formatFormat">
      </el-table-column>
      <el-table-column prop="project.teacherId" label="指导老师" min-width="120" :formatter="formatCharge">
      </el-table-column>
      <el-table-column prop="project.major" label="专业" min-width="120">
      </el-table-column>
      <el-table-column prop="project.projectDate" sortable label="申请立项日期" min-width="160">
      </el-table-column>
      <el-table-column prop="project.sponsor" label="主办单位" min-width="100">
      </el-table-column>
      <el-table-column
        prop="status"
        label="审核状态"
        width="100"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == '0'"
                  :type="scope.row.status === '3' ? 'primary' : 'success'"
                  disable-transitions>待提交</el-tag>
          <el-tag v-if="scope.row.status == '1'"
                  :type="scope.row.status === '3' ? 'primary' : 'success'"
                  disable-transitions >待审核</el-tag>
          <el-tag v-if="scope.row.status == '3'"
                  :type="scope.row.status === '3' ? 'primary' : 'success'"
                  disable-transitions>已通过</el-tag>
          <el-tag v-if="scope.row.status == '2'"
                  :type="scope.row.status === '3' ? 'primary' : 'success'"
                  disable-transitions>不通过</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" min-width="200" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleExamine(scope.$index, scope.row)" v-show="scope.row.status == '1'" size="small">通过</el-button>
          <el-button type="text" @click="disapprove(scope.$index, scope.row)" v-show="scope.row.status == '1'"  size="small">不通过</el-button>
          <el-button type="text" size="small" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
        </template>

      </el-table-column>
    </el-table>
<!--分页工具-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      :current-page="page"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

<!--    审核意见界面-->
    <el-dialog
      title="项目立项审核"
      :visible.sync="opinionDialogVisible"
      width="30%">
      <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
      <el-form-item label="审核意见" prop="opinion">
        <el-input type="textarea" v-model="editForm.opinion" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="opinionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="examine">确 定</el-button>
      </span>
    </el-dialog>

    <!--编辑界面-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
        <el-row>
          <input type="hidden" v-model="editForm.id">
          <el-col :span="14">
            <el-form-item label="赛事名称" prop="name">
              <el-input v-model="editForm.project.name" disabled auto-complete="off" style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="项目负责人" prop="teacherId">
              <el-input v-model="editForm.project.teacherId" disabled auto-complete="off" style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="组赛单位" prop="organization">
              <el-input v-model="editForm.project.organization" disabled auto-complete="off" style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="专业" prop="major">
              <el-input v-model="editForm.project.major" disabled auto-complete="off" style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="竞赛起始日期" prop="startDate">
              <el-input  v-show="dialogStatus == 'detail'" v-model="editForm.project.startDate" disabled auto-complete="off" style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="竞赛结束日期" prop="endDate" >
              <el-input v-model="editForm.project.endDate" disabled disabledauto-complete="off" style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="赛制" prop="format" :disabled="dialogStatus == 'detail'">
              <el-input  v-model="editForm.project.format  === '1' ? '单人赛' : '团体赛'" disabled auto-complete="off" style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="申请立项日期" prop="projectDate" >
              <el-input v-model="editForm.project.projectDate" disabled auto-complete="off" style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="主办单位" prop="sponsor" >
              <el-input v-model="editForm.project.sponsor" disabled auto-complete="off" style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="竞赛承办单位" prop="contractor" >
              <el-input v-model="editForm.project.contractor" disabled auto-complete="off" style="width: 220px;"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="注册费" >
              <el-input-number v-model="editForm.budget.enroll" :min="0" disabled></el-input-number>
            </el-form-item>
            <el-form-item label="差旅费">
              <el-input-number v-model="editForm.budget.travel" :min="0" disabled></el-input-number>
            </el-form-item>
            <el-form-item label="培训费">
              <el-input-number v-model="editForm.budget.train" :min="0" disabled></el-input-number>
            </el-form-item>
            <el-form-item label="指导费">
              <el-input-number v-model="editForm.budget.guide" disabled></el-input-number>
            </el-form-item>
            <el-form-item label="耗材费">
              <el-input-number v-model="editForm.budget.consume" disabled></el-input-number>
            </el-form-item>
            <el-form-item label="奖金">
              <el-input-number v-model="editForm.budget.bonus" disabled></el-input-number>
            </el-form-item>
            <el-form-item label="其他">
              <el-input-number v-model="editForm.budget.other" disabled ></el-input-number>
            </el-form-item>
            <el-form-item label="合计" >
              <el-input-number v-model="editForm.budget.sum" disabled ></el-input-number>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="editForm.project.phone" disabled auto-complete="off" style="width: 180px;"></el-input>
            </el-form-item>
            <el-form-item label="邮件" prop="mail">
              <el-input v-model="editForm.project.mail" disabled auto-complete="off" style="width: 180px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="论证组赛的目的和意义" prop="objective">
          <el-input type="textarea" v-model="editForm.project.objective" disabled auto-complete="off"></el-input>
        </el-form-item>

        <!--        详情信息-->
        <el-form-item  label="竞赛邀请函或通知附件" prop="objective">
          <el-input  v-model="fileName" disabled auto-complete="off"></el-input>
          <a :href="'http://cqfimages.gxuwzapp.top/'+ editForm.project.invitation" target="_blank" v-show="dialogStatus != 'add'">预览附件</a>
<!--          <a :href="'http://127.0.0.1:8888/subject/file/'+ editForm.project.invitation" target="_blank" v-show="dialogStatus != 'add'">预览附件</a>-->
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogFormVisible=false" v-show="dialogStatus != 'detail'">取消</el-button>
        <el-button @click.native="dialogFormVisible=false"  v-show="dialogStatus == 'detail'">关闭</el-button>
        <el-button type="primary" v-show="dialogStatus != 'detail'" @click="examine">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>


  export default {
    data() {
      return {
        dialogFormVisible: false,
        opinionDialogVisible: false, // 审核意见对话框
        filters: {
          name: ''
        },
        textMap: {
          update: '项目立项修改',
          add: '项目立项申请',
          detail: "项目立项详情",
          examine: "项目立项审核",
        },
        total: 0,
        page: 1,  // 当前页
        limit: 10,  // 每页数量
        projectData: [],  // 项目立项数据
        teacherList:[],
        sels: [], // 列表选中列
        dialogStatus: '',
        fileName:"",
        // 编辑界面数据
        editForm: {
          id: 0,
          projectId: 0,
          budgetId: 0,
          status: "",
          opinion: "",

          // 项目基本信息
          project: {
            name: "",
            charge: "",
            major: "",
            format: "",
            projectDate: "",
            sponsor: "",
            contractor: "",
            objective: "",
            invitation: [],
            phone: "",
            mail: "",
            organization: "",
            startDate: "",
            endDate: "",
          },

          // 经费预算
          budget: {
            enroll: 0,
            travel: 0,
            train: 0,
            guide: 0,
            bonus: 0,
            other: 0,
            consume: 0,
            sum: 0,
          },

        },
        editFormRules: {
          opinion: [{required: true, message: '请输入审核意见', trigger: 'blur'}]
        },
      }
    },
    mounted() {
      this.getProject();
      this.getTeacherList();
    },
    methods: {
      // 查询项目信息
      getProject: function () {
        let params = {
          name: this.filters.name,
          page: this.page,
          limit: this.limit,
          status: "1",
          teacherId:"",
        }
        var _this = this;
        this.http.get("projectApply/list", {params:params})
                .then(res =>{
          _this.projectData = res.data.data.list;
          _this.total = res.data.data.total;
        });
      },

      // 查询全部教师 TeacherList
      getTeacherList() {
        const _this = this;
        _this.http.get("teacher/list"
        ).then(res => {
          _this.teacherList = res.data;
        }).catch(error => {
          console.log("teacher error", error)
        });
      },
      // 审核
      examine() {
        let _this = this;
        this.http({
          url: "projectApply/examine",
          data: {
            id: this.editForm.id,
            projectId: this.editForm.projectId,
            budgetId: this.editForm.budgetId,
            status: this.editForm.status,
            opinion: this.editForm.opinion,
          },
          method: "post",
        }).then(res =>{
          if (res.data.code === 666) {
            _this.getProject();
            _this.$message({
              message: "提交成功",
              type: 'success'
            });
          } else {
            _this.$message({
              message: res.data.message,
              type: 'error'
            });
          }
        });

        this.opinionDialogVisible = false;
      },

      // 显示详情框
      handleDetail(index, row) {
        this.dialogStatus = 'detail';
        // 获取当前选中的附件信息
        if (row.project.invitation != undefined) {
          this.fileName = row.project.invitation.substring(row.project.invitation.lastIndexOf("_") + 1);
        } else {
          this.fileName = "";
        }
        this.dialogFormVisible = true;
        this.editForm = Object.assign({}, row);
      },
      // 获取当前通过审核的项目信息
      handleExamine(index, row) {
        // 获取当前选中信息
        this.editForm = Object.assign({}, row);
        this.editForm.status = "3";
        this.opinionDialogVisible = true;
        // this.examine();
      },
      // 获取当前不通过审核的项目信息
      disapprove(index, row){
        this.editForm.opinion = "";
        this.opinionDialogVisible = true;
        // 获取当前选中信息
        this.editForm = Object.assign({}, row);
        this.editForm.status = "2";
      },


    // 跳转到某页
    handleCurrentChange(val) {
      // 获取当前页
      this.page = val;
      // 重新获取数据
      this.getProject();
    },
    handleSizeChange(val){
      this.limit = val;
      this.getProject();
    },

    // 全选单选多选
    selsChange(sels) {
      this.sels = sels
    },
    // 项目负责人编号转换名字显示
    formatCharge:function(row, column){
      this.teacherList.forEach((obj)=>{
        if (obj.teacherId == row.project.teacherId){
          row.project.teacherId = obj.teacherName;
        }
      });
      return row.project.teacherId;
    },
    formatFormat: function (row, column) {
      return row.format === "1" ? "单人赛" : "团体赛";
    },
    formatStatus: function (row, column) {
      if (row.status === "0") {
        return "待提交";
      } else if (row.status === "1") {
        return "待审核";
      } else if (row.status === "2") {
        return "不通过";
      } else if (row.status === "3") {
        return "已批准";
      }
    },

  }

  }

</script>
<style rel="stylesheet/css">
  @keyframes treeTableShow {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  @-webkit-keyframes treeTableShow {
    from {opacity: 0;}
    to {opacity: 1;}
  }
</style>
<style scoped>
  a:link {color:blue;} /* 未访问的链接 */
  a:visited {color:orange;} /* 已访问的链接 */
  a:hover {color:green;} /* 鼠标划过链接 */
  a:active {color:red;} /* 已选中的链接 */

</style>
